<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <title>IP黑名单</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <style type="text/css" rel="stylesheet">
      .load-div {
        width: 100%;
        height: 300px;
        background-color: lightgray;
        border-radius: 10px;
        margin-top: 10px;
      }
      .ip-count {
        font-weight: bold;
        color: blue;
        margin-right: 5px;
      }
      .iptrace-tips {
        color: red;
        font-weight: bold;
      }
    </style>
  </head>
  <body class="pear-container">
    <!-- IP 黑名单 -->
    <!-- <div class="layui-card">
      <div class="layui-card-body"></div>
    </div> -->
    <div class="layui-row layui-col-space20">
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-body">
            <textarea
              name="ip"
              placeholder="ip|port|user|pass|time
ip:port user pass time
ip port user pass time"
              class="layui-textarea"
              rows="6"
            ></textarea>
            <button id="addip" class="pear-btn pear-btn-primary mt-10">
              新增
            </button>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-body">
            <form class="layui-form" lay-filter="form">
              <div class="layui-form-item">
                <label class="layui-form-label">痕迹库开关:</label>
                <div class="layui-input-block">
                  <div class="layui-inline flex">
                    <input
                      type="checkbox"
                      name="iptraceswitch"
                      lay-skin="switch"
                      lay-filter="iptraceswitchf"
                    />
                    <div class="mt-8 pl-8 iptrace-tips">
                      <i class="layui-icon layui-icon-about"></i>
                      开启后，购买的节点将不在出现IP痕迹库中的IP，达到IP去重的目的
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">IP总数:</label>
                <div class="layui-input-block flex align-center">
                  <div class="layui-inline">
                    <span class="ip-count">8</span>个
                  </div>
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block flex align-center">
                  <div class="layui-inline">
                    <button
                      id="editip"
                      type="button"
                      class="pear-btn pear-btn-primary"
                    >
                      编辑
                    </button>
                    <button id="clearip" type="button" class="pear-btn">
                      清空
                    </button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script src="/app/admin/admin/js/permission.js"></script>
    <script src="/app/admin/admin/js/common.js"></script>
    <script>
      /**
       * @description: Ip Bleak List (ip 黑名单)
       * @creat time: 2025-07-19
       */

      const ADDIP_API = '' // 新增IP接口

      // 表格渲染
      layui.use(['form', 'popup', 'loading'], function () {
        let form = layui.form
        let $ = layui.$
        let common = layui.common
        let util = layui.util
        let popup = layui.popup
        let loading = layui.loading
        // to do something...

        // 点击新增Ip.
        $('#addip').on('click', function () {
          const ips = $('textarea[name="ip"]').val()
          if (!ips) return popup.failure('请输入IP')
          //   TODO: 此处可校验IPs 格式正确与否
          //   loading.Load(1, '') //   loading...
          // TODO: 接口提交 iP集合
          // loading.loadRemove(1000);
        })

        // 编辑Ip.
        $('#editip').on('click', function () {
          const ips = $('textarea[name="ip"]').val()
          if (!ips) return popup.failure('请输入IP')
          //   loading.Load(1, '') //   loading...
          // TODO: 接口提交 iP集合
          // loading.loadRemove(1000);
        })

        // 清空Ip.
        $('#clearip').on('click', function () {
          const ips = $('textarea[name="ip"]').val()
          if (!ips) return popup.failure('请输入IP')
          //   loading.Load(1, '') //   loading...
          // TODO: 接口提交 iP集合
          // loading.loadRemove(1000);
        })

        form.on('switch(iptraceswitchf)', function (data) {
          console.log(data.elem.checked) //打印当前选择的信息
          //   loading.Load(1, '') //   loading...
          // TODO: 接口提交 iP集合
          // loading.loadRemove(1000);
        })
      })
    </script>
  </body>
</html>
